<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人信息详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  </head>
  <style>
    #app{
      width: 100%;
    }
    .content{
      width: 100%;
      margin-top: 0.3rem;
      background: #fff;
    }
    .content .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.53rem 0 0.53rem 0;
      width: 92%;
      margin: 0 auto;
    }
    .content .head .head_text{
      font-size: 0.7rem;
      color: #666;
    }
    .content .head .head_img{
      width: 2.2rem;
      height: 2.2rem;
    }
    .content .content_two{
      border-top: 0.03rem solid #f2f2f5;
      background: #fff;
    }
    .content .content_two .box{
      width: 92%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
    }
    .content .content_two .box .left{
      font-size: 0.7rem;
      color: #666;
    }
    .content .content_two .box .right{
      font-size: 0.7rem;
      color: #b2b2b8;
    }
    .content .content_two .box .right img{
      width: 0.35rem;
      height: 0.65rem;
      display: inline-block;
    }
    .content_thr{
      width: 100%;
      margin-top: 0.3rem;
      background: #fff;
    }
    .content_thr .thr_box{
      border-top: 0.03rem solid #f2f2f5;
    }
    .content_thr .thr_box .box{
      width: 92%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
    }
    .content_thr .thr_box .box .left{
      font-size: 0.7rem;
      color: #666;
    }
    .content_thr .thr_box .box .right{
      font-size: 0.7rem;
      color: #b2b2b8;
    }
    .content_thr .thr_box .box .right img{
      width: 0.35rem;
      height: 0.65rem;
      display: inline-block;
    }
  </style>
  <body>
  <div id="app">
      <div class="content">
          <div class="head">
              <div class="head_text">头像</div>
              <img class="head_img" src="../../image/head.png" alt="">
          </div>
          <div class="content_two" v-for="(list,index) in datalist" @click="modify(list.id,'myself',list.page,list.type)" :key="list.id">
              <div class="box">
                <div class="left">{{list.text1}}</div>
                <div class="right">{{list.text2}}<img :src="list.img" alt="" :style="{'display':index==4?'none':'inline-block'}"></div>
              </div>
          </div>
      </div>
      <div class="content_thr">
          <div class="thr_box" v-for="list2 in datalist2">
            <div class="box">
              <div class="left">{{list2.text1}}</div>
              <div class="right">{{list2.text2}}<img :src="list2.img" alt=""></div>
            </div>
          </div>
      </div>
  </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-slide.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
          datalist:[
             {text1:'昵称',text2:'不啦不啦 ',img:'../../image/right.png',id:0,type:'修改昵称',page:'myself/myname'},
             {text1:"姓名",text2:"未设置 ",img:'../../image/right.png',id:1,type:'设置姓名',page:'myself/name'},
             {text1:"手机号",text2:"130****2349 ",img:'../../image/right.png',id:2,type:'手机号',page:'myself/set_phone'},
             {text1:"住址",text2:"未设置 ",img:'../../image/right.png',id:3},
             {text1:"实名认证",text2:"已认证 ",img:'../../image/right.png',id:4},
          ],
          datalist2:[
            {text1:'微信',text2:'未绑定 ',img:'../../image/right.png'},
            {text1:'QQ',text2:'未绑定 ',img:'../../image/right.png'},
          ]
        },
        methods:{
          modify:function(id,name,page,type){
            switch (id) {
              // 跳转到修改昵称
              case 0:
              api.openWin({
                  name: name,
                  url: '../header/user_header.html',
                  pageParam: {
                    name: page,
                    type:type
                  }
              });
                break;
              // 跳转到设置姓名
              case 1:
              api.openWin({
                  name: name,
                  url: '../header/user_header.html',
                  pageParam: {
                    name: page,
                    type:type
                  }
              });
                break;
              //跳转到设置手机号
              case 2:
              api.openWin({
                  name: name,
                  url: '../header/user_header.html',
                  pageParam: {
                    name: page,
                    type:type
                  }
              });
                break;
            }
          }
        }
      })
  </script>
  </html>
